<script setup>
import {computed, onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import store from "@/store";

/* data  */
const rootActiveRouter = ref()
const route = useRoute();

const username=computed(() => store.state.username)

/* 生命周期  */
onMounted(() => {
  rootActiveRouter.value=route.matched[route.matched.length-1].name;
})

/* function  */


</script>

<template>
  <!--顶部菜单-->
  <div>
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
             active-text-color="#ffd04b" :ellipsis="false" router :default-active="rootActiveRouter">
      <el-menu-item>媒体宝系统</el-menu-item>
      <el-menu-item index="Task" :route="{name:'ActivityList'}">任务宝</el-menu-item>
      <el-menu-item index="Msg" :route="{name:'Msg'}">消息宝</el-menu-item>
      <el-menu-item index="Auth" :route="{name:'Auth'}">授权</el-menu-item>
      <el-sub-menu index="5">
        <template #title>{{username}}</template>
        <el-menu-item index="5-1">个人中心</el-menu-item>
        <el-menu-item index="5-2">退出</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>


<style scoped>
/* 将"田耀威"菜单项移到最右侧 */
.el-menu-demo > .el-sub-menu:nth-child(5) {
  margin-left: auto;
}
</style>